import { debounce } from '../../utils/index'
import { mapGetters } from 'vuex';

export default {
    data() {
        return {
            $_sidebarElm: null,
            $_resizeHandler: null,
            $_resizeHandlerTwo: null,
            screenWidth: ''
        }
    },
    computed: {
        ...mapGetters(['resizeShow']),
    },
    watch: {
        $route: {
            immediate: true,
            handler(val) {
                this.$store.commit('customMenu/RESIZE_SHOW', null);
                setTimeout(() => {
                    this.resizeFunc();
                }, 0);
            }
        },
        resizeShow: {
            immediate: true,
            handler(val) {
                if (val != null) {
                    this.$_initResizeEventTwo()
                    this.$_initResizeEventTwo2()
                }
            }
        }
    },
    mounted() {
        this.$_resizeHandler = debounce(() => {
            if (this.charts) {
                this.charts.resize()
            }
            if (this.chart) {
                this.chart.resize()
            }
            if (this.chartTwo) {
                this.chartTwo.resize()
            }
            if (this.myChart) {
                this.myChart.resize()
            }
            if (this.chartThree) {
                this.chartThree.resize()
            }
        }, 280)
        this.$_resizeHandlerTwo = debounce(() => {
            if (this.TwomyChart) {
                this.TwomyChart.resize()
            }
            if (this.threeChart) {
                this.threeChart.resize()
            }
        }, 100)
        this.$_initResizeEvent()
        this.$_initResizeEvent2()
        this.$_initSidebarResizeEvent()
    },
    beforeUnmount() {
        this.$_destroyResizeEvent()
        this.$_destroySidebarResizeEvent()
    },
    // to fixed bug when cached by keep-alive
    // https://github.com/PanJiaChen/vue-element-admin/issues/2116
    activated() {
        this.$_initResizeEvent()
        this.$_initResizeEvent2()
        this.$_initSidebarResizeEvent()
    },
    deactivated() {
        this.$_destroyResizeEvent()
        this.$_destroyResizeEvent2()
        this.$_destroySidebarResizeEvent()
    },
    methods: {
        resizeFunc() {
            if (this.charts) {
                this.charts.resize()
            }
            if (this.chart) {
                this.chart.resize()
            }
            if (this.chartTwo) {
                this.chartTwo.resize()
            }
            if (this.myChart) {
                this.myChart.resize()
            }
            if (this.chartThree) {
                this.chartThree.resize()
            }
            if (this.TwomyChart) {
                this.TwomyChart.resize()
            }
            if (this.threeChart) {
                this.threeChart.resize()
            }
        },
        // use $_ for mixins properties
        // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
        $_initResizeEvent() {
            window.addEventListener('resize', this.$_resizeHandler)
        },
        $_initResizeEvent2() {
            window.addEventListener('resize', this.$_resizeHandlerTwo)
        },
        $_destroyResizeEvent() {
            window.removeEventListener('resize', this.$_resizeHandler)
        },
        $_destroyResizeEvent2() {
            window.removeEventListener('resize', this.$_resizeHandlerTwo)
        },
        $_sidebarResizeHandler(e) {
            if (e.propertyName === 'width') {
                this.$_resizeHandler()
                this.$_resizeHandlerTwo()
            }
        },
        $_initSidebarResizeEvent() {
            this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
            this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
        },
        $_destroySidebarResizeEvent() {
            this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
        },
        $_initResizeEventTwo() {
            window.addEventListener('resize', this.$_resizeHandler())
        },
        $_initResizeEventTwo2() {
            window.addEventListener('resize', this.$_resizeHandlerTwo())
        },
    }
}